<template>
  <div id="app">
<!--                        imageUrl：请求返回的属性   -->
<!--    <p v-for="img in images">{{img.imageUrl}}</p>-->
<!--    <button @click="loadImg">发送axios请求</button>-->
    <img :class="imgClass" v-for="img in images" :src="img.imageUrl">
    <div :class="btnClass" @click="loadImg">再来一波</div>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      images:[],
      imgClass: "myImg",
      btnClass: 'myBtn',
    }
  },
  // 页面元素挂载完成后的回调
  mounted() {
    this.loadImg();
  },
  methods:{
    loadImg: function () {
      // this表示vue对象，赋值给局部变量vm
      let  vm = this;
      // 使用axios发送请求
      // url 请求路径  method 请求方式
      // then 请求成功的回调 res：请求成功的响应对象
      // catch 请求出现异常的回调 err: 请求失败的异常对象
      this.axios({
        url:'https://www.mxnzp.com/api/image/girl/list/random?app_id=ypawwbi0iheosmql&app_secret=dGdHaHBkZllocDRCNjdnOU5IZmR4UT09',
        method: 'GET',
      }).then(function (res) {
        //resp.data  后端返回的数据 被axios封装了
        // console.log(res.data);
        // console.log(res.data.data);
        // vm.images = res.data.data;
        // vm.images 获取vue中的images变量
        vm.images.push(...res.data.data);
      }).catch(function (err) {
        console.log(err);
      });
    }
  }
}


</script>
<style>
.myImg{
  width: 192px;
  height: 108px;
  border: gray 1px solid;
  margin: 4px 8px;
  border-radius: 10px;
}
.myBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .2);
  color: white;
}
</style>
